﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>listview与grid示例</title>
<link rel="stylesheet" type="text/css" href="../../../../frame/theme/listview.css"/>
<link rel="stylesheet" type="text/css" href="../../../../frame/theme/dropmenu.css"/>
<script type="text/javascript" language="javascript" src="../../../../common/js/common.js"></script>
<script type="text/javascript"  language="javascript" src="../../../../frame/js/listview.js"></script>
</head>
<body style="margin:0px;padding:2px;font-size:12px;font-family:微软雅黑,宋体">
<div id="lvc" style="width:600px;height:400px;border:solid 1px #ececec;padding:1px;">
</div>
<input type="button" value="网格" onclick="lv.showGrid=!lv.showGrid;lv.reset();var html=lv.render('lv');document.getElementById('htmlsrc').value=html;document.getElementById('lvc').innerHTML=html;"/>
<input type="button" value="图标" onclick="lv.showIcon=!lv.showIcon;lv.reset();var html=lv.render('lv');document.getElementById('htmlsrc').value=html;document.getElementById('lvc').innerHTML=html;"/>
<input type="button" value="序号" onclick="lv.showSequence=!lv.showSequence;lv.reset();var html=lv.render('lv');document.getElementById('htmlsrc').value=html;document.getElementById('lvc').innerHTML=html;"/>
<input type="button" value="交错色" onclick="lv.showAlternate=!lv.showAlternate;var html=lv.render('lv');document.getElementById('htmlsrc').value=html;document.getElementById('lvc').innerHTML=html;"/>
<input type="button" value="悬浮高亮" onclick="lv.showHoverHilight=!lv.showHoverHilight;var html=lv.render('lv');document.getElementById('htmlsrc').value=html;document.getElementById('lvc').innerHTML=html;"/>
<input type="button" value="选中高亮" onclick="lv.showChosenHilight=!lv.showChosenHilight;var html=lv.render('lv');document.getElementById('htmlsrc').value=html;document.getElementById('lvc').innerHTML=html;"/>
<input type="button" value="选中整行高亮" onclick="lv.chosenHilightWholeItem=!lv.chosenHilightWholeItem;var html=lv.render('lv');document.getElementById('htmlsrc').value=html;document.getElementById('lvc').innerHTML=html;"/>
<div id="onclickResult"></div>
<p style="margin-top:20px"></p>
<textarea id="htmlsrc" style="position:relative;top:0px;left:0px;width:100%;height:200px;"></textarea>
<script type="text/javascript"  language="javascript">
	function onColumnClick() {
		var x = arguments[0];
		document.getElementById('onclickResult').innerHTML = '单击了“' + x.getContentResult() + '”（第' + (x.parent.index + 1) + '行，第' + (x.index + 1) + '列）';
	}
	function onColDblClk() {
		var x = arguments[0];
		alert(x.getContentResult());
	}
	//扩展区域以供显示编辑内容
	function expand() {
		if (arguments.length == 0) return;
		var lvc = arguments[0];
		var lvi = lvc.parent;
		var el = document.getElementById(lvi.id);
		if (el == null) return;
		var expand = null;
		var id = 'edit_' + lvi.id;
		if (lvi.editing) {
			lvi.editing = false;
			expand = document.getElementById(id);
			if (expand) el.removeChild(expand);
			return;
		}
		var css = 'clear:both;position:relative;left:0px;width:100%;min-height:200px;_height:200px;';
		if (INFO.browser.IE) {
			expand = document.createElement('<div id="' + id + '" style="' + css + '"></div>');
		}
		else {
			expand=document.createElement('div');
			expand.id = id
			expand.setAttribute('style',css);
		}
		lvi.editing = true;
		el.appendChild(expand);
	}
	function getEditCtrl() {
		if (arguments.length == 0) return;
		var lvc = arguments[0];
		
		var editel = null;
		if (lvc.index > 0) {
			editel = document.createElement('input');
			editel.type = 'text';
			editel.value = lvc.getContentResult();
		}
		else {
			editel = document.createElement('select');
			var o1 = document.createElement('option');
			editel.options.add(o1);
			o1.value = '1';
			o1.text = '是';
			var o2 = document.createElement('option');
			editel.options.add(o2);
			o2.value = '0';
			o2.text = '否';
		}
		editel.style.width = '99%';
		return editel;
	}
	function setEditResult(lvc,el) {
		lvc.label = el.value;
	}
	function getContent() {
		if (arguments.length == 0) return;
		var lvc = arguments[0];
		if (lvc.parent.itemType == 1) return null;
		return lvc.label
	}
	var lv, lvi, lvc;
	lv = new ListView({ id: 'lv1', width: 600, widthMeasurement: '%', iconPath: 'sample_images/', getcontent: getContent, geteditctrl: getEditCtrl, seteditresult: setEditResult, onclick: onColumnClick, ondblclick: expand, showChosenHilight: true, chosenHilightWholeItem: false, showHoverHilight: true, showAlternate: true, showGrid: true, showSequence: false, sequenceWidth: 20, showIcon: false });
	lv.rowHeight=24;
	lv.rowFontStyle='normal normal bold 14px /23px 微软雅黑';
	lv.rowFontColor='red';
	//lv.rowFontHilightColor='#fff';
	lv.fixHeader = false;
	//lv.height = 400;
	lv.selectable = true;
	lv.setHeader({ id: 'lvh1', itemType: 1, columns: [{ id: 'lvch1', label: '标题标题标题标题标题标题1',onclick:function(lvc){alert(lvc.label);}, desc: '', width: 30, align: 'left' }, { id: 'lvch2', label: '标题2', desc: '', width: 30, align: 'center' }, { id: 'lvch3', label: '标题3', align: 'left', width: 0, sortable: false}]})/*header end*/
	lv.noSelection = false;
	lv.maintainable = true;
	lv.editable = false;
	var lvie = new ListViewItemEditor({ width: 37, entries: [{ label: '删除条目', desc: '删除条目', icon: 'sample_images/lvi_delete.gif', onclick: function(lvi) { lvi.parent.removeItem(lvi); } }, { label: '追加条目', desc: '追加新条目', icon: 'sample_images/lvi_add.gif', onclick: function(lvi) { lvi.parent.addItem({ id: 'lvi_' + lvi.parent.rows.length + 1 }); } }] });
	lv.listViewItemEditor=lvie;
	//item1
	lvi = new ListViewItem({ id: 'lvi1', icon: 'tvl.gif' });
	lv.addItem(lvi);

	lvc = new ListViewColumn({ id: 'lvi1c1', label: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容11', desc: '' });
	lvi.addColumn(lvc);

	lvc = new ListViewColumn({ id: 'lvi1c2', label: '内容12', desc: '' });
	lvi.addColumn(lvc);

	lvc = new ListViewColumn({ id: 'lvi1c3', label: '内容13', desc: '' });
	lvi.addColumn(lvc);

	//item2
	lvi = new ListViewItem({ id: 'lvi2', icon: 'tvl.gif' });
	lv.addItem(lvi);

	lvc = new ListViewColumn({ id: 'lvi2c1', label: 'abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz', desc: '' });
	lvi.addColumn(lvc);

	//lvc = new ListViewColumn({ id: 'lvi2c2', label: '内容22', desc: '' });
	//lvi.addColumn(lvc);

	//lvc = new ListViewColumn({ id: 'lvi2c2', label: '内容23', desc: '' });
	//lvi.addColumn(lvc);

	//item3
	lv.addItem({ id: 'lvi3', columns: [{ id: 'lvi3c1', label: '内容31', desc: '内容31说明' }, { id: 'lvi3c2', label: '内容32deleted' }, { id: 'lvi3c3', label: '内容33'}] });
	lv.addItem({ id: 'lvi4', columns: [{ id: 'lvi4c1', label: '内容41', desc: '内容31说明' }, { id: 'lvi4c2', label: '内内容内容内容内容内容内容内容容内容42' }, { id: 'lvi4c3', label: '内容43'}] });
	lv.addItem({ id: 'lvi5', columns: [{ id: 'lvi5c1', label: '内容51', desc: '内容51说明' }, { id: 'lvi5c2', label: '内容52' }, { id: 'lvi5c3', label: '内容内容内容内容内容内容内容内容内容内容内容53'}] });
	//lv.removeItem({ id: 'lvi3' });
	var js = '';
	for (var i = 6; i <= 20; i++) {
		js += "lv.addItem({ id: 'lvi" + i + "',columns:[{ id: 'lvi" + i + "c1', label: '内容" + i + "1', desc: '内容" + i + "1说明' },{ id: 'lvi" + i + "c2', label: '内容" + i + "2'},{ id: 'lvi" + i + "c3', label: '内容" + i + "3'}]});";
	}
	eval(js);
	var lvHtml = lv.render('lv');
	//alert(lvHtml);
	document.getElementById('htmlsrc').value=lvHtml;
	document.getElementById('lvc').innerHTML = lvHtml;
	var x = { a: function(){ return 1 }() };
	//alert(x.a); //return 1
	var o1 = '测试1', o2 = '测试2';
	//alert(sortByString(o1,o2));
 
</script>
</body>
</html>
